<script type="text/javascript" src="/js/jquery.cycle.all.min.js"></script>

<style>
<!--
.pics { height: 232px; width: 232px; padding:0; margin:0; overflow: hidden }
.pics img { height: 200px; width: 200px; padding: 15px; border: 1px solid #ccc; background-color: #eee; top:0; left:0 }
.pics img {
	-moz-border-radius: 10px; -webkit-border-radius: 10px;
}
#slideshow { left: 20px }
#nav { width: 300px; margin: 15px }
#nav li { width: 50px; float: left; margin: 8px; list-style: none }
#nav a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
-->
</style>
<ul id="nav"> 
        <li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="50" height="50" /></a></li> 
        <li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="50" height="50" /></a></li> 
        <li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="50" height="50" /></a></li> 
        <li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="50" height="50" /></a></li> 
        <li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="50" height="50" /></a></li> 
        <li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="50" height="50" /></a></li> 
        <li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="50" height="50" /></a></li> 
        <li><a href="#"><img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="50" height="50" /></a></li> 
    </ul> 
    <div id="slideshow" class="pics"> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" /> 
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" /> 
    </div>
    

<script>
$('#slideshow').cycle({ 
    fx:     'turnDown', 
    speed:  'fast', 
    timeout: 0, 
    pager:  '#nav', 
    pagerAnchorBuilder: function(idx, slide) { 
        // return selector string for existing anchor 
        return '#nav li:eq(' + idx + ') a'; 
    } 
});
</script>